<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Title</title>
    <script src="${request.contextPath}/js/jquery.js"></script>
    <style>
        #index_content {
            position:fixed;
            width:100%;
            height:100%;
        }
        #index_leftbar {
            float:left;
            width:260px;
            height:100%;
            background-color:#1f2837;
        }
        #leftbar_list {
            width:100%;
            list-style:none;
        }
        .leftbar_firstmenu {
            display:block;
            width:244px;
            height:18px;
            line-height:18px;
            padding:8px;
            font-size:14px;
            color:#999;
            font-weight:500;
        }
        .leftbar_firstmenu:hover {
            background-color:#233342;
            font-weight:700;
            color:#fff;
        }
        #leftbar_item_selected {
            color:#fff;
            font-weight:700;
            background-color:#233342;
        }
        .leftbar_secondmenu{
            display:block;
            width:232px;
            height:18px;
            line-height:18px;
            padding:8px;
            padding-left:20px;
            font-size:14px;
            color:#999;
            font-weight:500;
            background:#123;
        }
        .leftbar_secondmenu:hover {
            color:#fff;
            font-weight:700;
            background:#000;
        }

        #right_content {
            float:left;
            width:calc(100% - 260px);
            height:calc(100% - 60px);
            background:#e0e8f5;
            overflow-y:scroll;
        }
        ::-webkit-scrollbar {
            width:5px;
            height:10px;
        }
        ::-webkit-scrollbar-track-piece{
            background: #fff;
        }
        ::-webkit-scrollbar-thumb:vertical{
            background-color: #555;
            -webkit-border-radius: 6px;
        }
        .loading {
            display:none;
            width:100%;
            height:100%;
            position:fixed;
            z-index:999;
            background-color:rgba(0,0,0,.5);
            background-image:url(${request.contextPath}/images/icons/loading.gif);
            background-size:50px;
            background-position:center;
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
    <div class="loading"></div>
    <div id="index_wrapper">
        <#include "/global/header.html" />
        <div id="index_content">
            <div id="index_leftbar">
                <ul id="leftbar_list">
                </ul>
            </div>
            <div id="right_content">
            </div>
        </div>
    </div>
</body>
<script>
    function showMenuList(f) {
        var ul = $(f).next();
        if($(ul).is('ul')) {
            $(ul).toggle();
        }
    }
    function toPage(s) {
        $(".loading").css("display", "block");
        var method = $(s).children("input:first-child").val();
        $.ajax({
            url: "${request.contextPath}/"+method,
            type: "get",
            async: true,
            dataType: "text",
            success: function(data) {
                $("#right_content").html(data);
            }
        })
        $(".loading").css("display", "none");
    }
    window.onload = function() {

    }
    $.ajax({
        url: "${request.contextPath}/getValidMenuList",
        type: "post",
        async: false,
        scriptCharset: 'utf-8',
        dataType: "text",
        success: function(data) {
            if(data != "") {
                var json = JSON.parse(data);
                for(var j in json) {
                    var s = "<li><a href='javascript:void(0)' class='leftbar_firstmenu' onclick='showMenuList(this)'>"+json[j].firstName+"</a>";
                    var json2 = json[j].secondMenus;
                    if(json2 != null && json2.length > 0) {
                        s += "<ul>"
                        for(var j2 in json2) {
                            s += "<li><a href='javascript:void(0)' class='leftbar_secondmenu' onclick='toPage(this)'>"+json2[j2].name+"<input type='hidden' value='"+json2[j2].url+"'></a></li>";
                        }
                        s += "</ul>";
                    }
                    s += "</li>";
                    $("#leftbar_list").append(s);
                    showMenuList($(".leftbar_firstmenu"));
                }
            }
        },
        error: function(data) {
            alert(data);
        }
    })
</script>
</html>